<template>
  <div class="home">
    <ul class="type-list">
      <router-link v-for="(item,index) in types" :key="index" tag="li" :to="'/list/' + item.id">
        <img :src="'/img/icon/' + item.img + '.png'" alt>
        <p>{{item.text}}</p>
      </router-link>
    </ul>
    <ul class="ad">
      <router-link v-for="(item,index) in ad" :key="index" tag="li" :to="'/detail/' + item.id">
        <h3 :class="'color-' + index">{{item.title}}</h3>
        <p>{{item.description}}</p>
        <img :src="'/img/ad/' + item.url" alt>
      </router-link>
    </ul>
    <div class="guess">
      <div class="guess-title">猜你喜欢</div>
      
      <Item v-for="(item,index) in list" :data="item" :key= "index">

      </Item>
    </div>
  </div>
</template>
<style lang="scss">
@import "../base.scss";
.home {
  .type-list {
    @include clearfix;
    background: #fff;
    padding: 5px 0 10px;
    li {
      width: (100%/5);
      float: left;
      text-align: center;
      img {
        width: 55%;
      }
      p {
        font-size: 12px;
        margin: 5px 0 10px;
      }
    }
  }
  .ad {
    background: #fff;
    margin-top: 10px;
    display: flex;
    li {
      flex: 1;
      padding: 15px 0 15px 0;
      text-align: center;
      border-right: 1px solid #ccc;
      &:last-child {
        border-right: none;
      }
      img {
        width: 60%;
      }
      $i: 0;
      @each $item in #0085ff, #0085ff, #0085ff {
        .color-#{$i} {
          color: $item;
        }
        $i: $i + 1;
      }
      h3 {
        font-size: 16px;
      }
      p {
        margin: 5px 0;
        font-size: 12px;
        color: #666;
      }
    }
  }
  .guess {
    background-color: #fff;
    margin-top: 10px;
    .guess-title {
      margin: 0 10px;
      color: #0875f1;
      font-weight: 600;
      border-bottom: 1px solid #ccc;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
    }
  }
}
</style>

<script type="text/javascript">

import Item from '../components/item.vue'

export default {
  components:{
    Item
  },
  data() {
    return {
      types: [
        { text: "美食", img: "01", id: "1" },
        { text: "电影", img: "02", id: "2" },
        { text: "酒店", img: "03", id: "3" },
        { text: "休闲", img: "04", id: "4" },
        { text: "外卖", img: "05", id: "5" },
        { text: "KTV", img: "06", id: "6" },
        { text: "周边游", img: "07", id: "7" },
        { text: "丽人", img: "08", id: "8" },
        { text: "小吃", img: "09", id: "9" },
        { text: "火车票", img: "10", id: "10" }
      ],
      ad: [],
      list: []
    };
  },
  created() {
    this.$http.get("data/home.json").then(({ data }) => {
      this.ad = data.ad;
      this.list = data.list;
    });
  }
};
</script>
